<template>
  <div id="carType">
    <ul>
      <li class="typeLi" @click="carType='轿车',sendType()">轿车</li>
      <li class="typeLi" @click="carType='suv',sendType()">suv</li>
      <li class="typeLi" @click="carType='商务车',sendType()">商务车</li>
      <li class="typeLi" @click="carType='新能源',sendType()">新能源</li>
      <li class="typeLi" @click="carType='越野车',sendType()">越野车</li>
    </ul>
    <div id="highlow">
      <el-col :md="12">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            价格排序
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-sort-up" command="由低到高">由低到高</el-dropdown-item>
            <el-dropdown-item icon="el-icon-sort-down" command="由高到低">由高到低</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
       
      </el-col>
    
    <i class="el-icon-refresh-left" @click="reset()"></i>
 


    </div>
   
  </div>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
  data() {
    return {
      carType: "",
      order: 1
    };
  },
  created() {
    EventBus.$emit("carType", {
      carType: this.carType
    });
    EventBus.$emit("order", {
      order: this.order
    });
  },
  methods: {
    sendType() {
      EventBus.$emit("carType", {
        carType: this.carType
      });
    },
    reset(){
      EventBus.$emit("reset", {
        carType: "",
        brand:"",
        order:1,
        price1:0,
        price2:1000,
        displacement1:0,
        displacement2:5
      });
    },
    // dianji() {
    //   $(this)
    //     .addClass("typeLi")
    //     .siblings()
    //     .removeClass("typeLi");
    // },
    handleCommand(command) {
      if (command == "由低到高") {
        this.order = 1;
        // this.downUp();
      }
      if (command == "由高到低") {
        this.order = 0;
        // this.upDown();
      }
      EventBus.$emit("order", {
        order: this.order
      });
    }
    // downUp() {
    //   this.$message("价格：由低到高");
    //   this.$axios
    //     .post("http://localhost:3000/carlist/PriceSortUp")
    //     .then(res => {
    //       // console.log("查询结果：", res.data.data);
    //       this.$store.state.cars = res.data.data;
    //       // console.log(res.data.data);
    //     })
    //     .catch(err => {
    //       console.log("错误信息：", err);
    //     });
    //   // window.bus.$emit("sendData1", this.sortUp);
    // },
    // upDown() {
    //   this.$message("价格：由高到低");
    //   this.$axios
    //     .post("http://localhost:3000/carlist/PriceSortDown")
    //     .then(res => {
    //       // console.log("查询结果：", res.data.data);
    //       this.$store.state.cars = res.data.data;
    //       // console.log(res.data.data);
    //     })
    //     .catch(err => {
    //       console.log("错误信息：", err);
    //     });
    //   // window.bus.$emit("sendData2", this.sortDown);
    // }
  }
};
</script>

<style scoped>
#carType {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  /* border:1px solid #007bff ;  */
  /* rgb(252, 227, 2) */
  /* background-color: rgb(215, 223, 114); */
}
#carType ul {
  list-style: none;
}

#carType .typeLi {
  float: left;
  width: 16%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
#carType .typeLi:hover {
  background-color: rgb(252, 227, 2);
  color: #fff;
  cursor: pointer;
  border-radius: 10px;
}
/* .typeLi{
} */
/* #carType .li1{
    margin-left:-40px
   } */
#highlow {
  float: right;
  width: 20%;
  height: 80%;
  /* margin-top:5px;     */
  /* line-height: 80%; */
  vertical-align: center;
  margin-top: 2px;
  /* margin-left:10px; */
  /* border:1px solid #000; */
}
#highlow span {
  display: block;
  width: 100%;
  height: 80%;
  text-align: center;
  line-height: 30px;
  margin-left: 20px;
  margin-top: 8px;
  /* border: 1px solid #000; */
}
#highlow span:hover {
  color: #007bff;
  cursor: pointer;
}
.el-icon-refresh-left{
 font-size: 25px;
 color: blue;
 margin-left: 50px;
 margin-top: 10px;
}
.el-icon-refresh-left:hover{
  cursor: pointer;
}
@media (max-width: 768px) {
  .el-icon-refresh-left{
   position: relative;
   top: -40px;
   left:70px;
  }
}
</style>

